<template>
  <div>
    <h3>我的订单</h3>

    <el-table
      border
      ref="multipleTable"
      :data="ordersList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @select="select"
    >
      <el-table-column type="selection"></el-table-column>

      <el-table-column label="订单号" prop="oid"></el-table-column>

      <el-table-column prop="itemName" label="商品名"></el-table-column>
      <el-table-column prop="prices" label="总价"></el-table-column>

      <el-table-column prop="number" label="购买数量" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="status" label="订单状态" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="address" label="发货地址" show-overflow-tooltip>
      </el-table-column>
      <!-- <el-table-column prop="op" label="操作" show-overflow-tooltip>
        <el-button type="danger" @click="deleteGoods(scope.$index)"
          >删除</el-button
        >
      </el-table-column> -->
    </el-table>
    <el-button
      type="success"
      v-if="ordersPageInfo.current > 1"
      @click="prePage(ordersPageInfo.current, ordersPageInfo.size)"
      >上一页</el-button
    >
    <el-button
      type="success"
      v-if="ordersPageInfo.current < ordersPageInfo.pages"
      @click="nextPage(ordersPageInfo.current, ordersPageInfo.size)"
      >下一页</el-button
    >
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { select_order_list } from '../api/index'
export default {
  name: 'OrderView',
  data() {
    return {
      ordersList: [], //订单
      ordersPageInfo: {},
      id: '',
      pageIndex: 1,
      pageSize: 4,
    }
  },
  created() {
    this.selectOrdersListByUserId(this.pageIndex, this.pageSize)
  },
  methods: {
    prePage(index, size) {
      this.selectOrdersListByUserId(index - 1, size)
    },
    nextPage(index, size) {
      this.selectOrdersListByUserId(index + 1, size)
    },
    selectOrdersListByUserId(pageIndex, pageSize) {
      //从vuex中获取到用户id
      const userId = this.$store.state.userId
      console.log('userId   .....' + userId)
      select_order_list(userId, pageIndex, pageSize)
        .then((res) => {
          console.log('res' + res.map.pageInfo)
          this.ordersPageInfo = res.map.pageInfo
          this.ordersList = this.ordersPageInfo.records
        })
        .catch()
    },
  },
  computed: {
    // 监控数据的获取
    ...mapGetters(['userName', 'userId']),
  },
}
</script>
